<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="index-links.html">
</head>
<body unresolved>

	<h2>Usability Tests with Larger Datasets</h2>
	Use this demo to benchmark performance with larger datasets.
	<p>

	<span style="color:red">Firefox has a real issue with this much DOM manipulation, so larger datasets should avoid rendering a large table, instead use the built in paging.<br>
	This page loads and sorts instantly in Chromium.</span>

	<p>

	<template id="example" bind>
		<sortable-table defaultStyle data="{{data}}" columns="{{columns}}" disableColumnMove>
			<template id="fruitsTemplate">
				<td style="text-align:left">
					<fruit-icon fruit="{{value}}"></fruit-icon>
					{{value}}
				</td>
			</template>
		</sortable-table>
	</template>

	<script>
	var data;

	var columns = [
		{name: 'id', title: 'ID' },
		{name:'fruit', title:'Fruit', cellTemplate: 'fruitsTemplate' },
		{name:'alice', title:'Alice' },
		{name:'bill', title:'Bill' },
		{name:'casey', title:'Casey' },
		{name:'average', title:'Average', formula: function(row){ return Math.round((row.alice + row.bill + row.casey)/3*10)/10; }},
		{name:'total', title:'Total', formula: function(row){ return row.alice + row.bill + row.casey; }}
	];

	var fruit = ['apple','banana','grape','pear','strawberry'];

	function generateData(count){
		var ds = [];
		for(var i=0;i<count;i++){
			ds.push({
				id: i,
				fruit: fruit[Math.floor(Math.random()*5)],
				alice: Math.floor(Math.random()*16),
				bill: Math.floor(Math.random()*16),
				casey: Math.floor(Math.random()*16)
			});
		}
		return ds;
	}

	window.addEventListener('polymer-ready', function(){
		data = generateData(100);
		document.getElementById('example').model = {
			data: data,
			columns: columns
		};
	});
	</script>

	<index-links page="large-dataset.html"></index-links>
</body>
</html>